<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('产品生产')" />
    <style type="text/css">.user-info-head{position:relative;display:inline-block;}.user-info-head:hover:after{content:'\f030';position:absolute;left:0;right:0;top:0;bottom:0;color:#eee;background:rgba(0,0,0,0.5);font-family:FontAwesome;font-size:24px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;line-height:110px;border-radius:50%;}</style>
</head>
<body class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
<section class="section-content">
    <div class="row">
        <div class="col-sm-4 col-md-offset-5">
            <div class="center-block" >
                <h2>
                    <i class="fa fa-calendar" style="margin-left: -20px" ></i>
                    <b class="font-noraml">生产倒计时：</b>
                </h2>
            </div>
            <div>
                <h2 class=""><span id="show"></span></h2>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-sm-8 col-md-offset-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header">
                    <h5>产品生产</h5>
                </div>
                <div class="ibox-content">
                    <div class="nav-tabs-custom">
                        <div class="tab-content">
                            <!--订单信息-->
                            <div class="tab-pane active" id="user_info">
                                <div class="ibox-content">
                                    <ul class="list-group list-group-striped">
                                        <li class="list-group-item"><i class="fa fa-shopping-cart"></i>
                                            <b class="font-noraml">产品编号：</b>
                                            <p class="pull-right"><span id="goodsId1" th:text="${sysGoods.getId()}"></span></p>
                                            <input id="goodsId" type="hidden" th:value="${sysGoods.getId()}">
<!--                                            <input id="goodsId" type="hidden" >-->
                                        </li>
                                        <li class="list-group-item"><i class="fa fa-code"></i>
                                            <b class="font-noraml">产品名称：</b>
                                            <p class="pull-right"><span th:text="${sysGoods.getName()}"></span></p>
                                        </li>
                                        <li class="list-group-item"><i class="fa fa-forumbee"></i>
                                            <b  class="font-noraml">产品库存：</b>
                                            <p class="pull-right"><span th:text="${sysGoods.getStock()}"></span></p>
                                        </li>
                                        <li class="list-group-item"><i class="fa fa-yen"></i>
                                            <b  class="font-noraml">产品单价：</b>
                                            <p class="pull-right"><span th:text="${sysGoods.getPrice()}"></span></p>
                                        </li>
                                        <li class="list-group-item"><i class="glyphicon glyphicon-save"></i>
                                            <b  class="font-noraml">所属公司：</b>
                                            <p class="pull-right"><span th:text="${sysGoods.getCom()}"></span></p>
                                        </li>
                                        <li class="list-group-item"><i class="fa fa-calendar"></i>
                                            <b  class="font-noraml">创建时间：</b>
                                            <p class="pull-right">
                                                <span th:text="${#dates.format(sysGoods.getCreateTime(), 'yyyy-MM-dd')}"></span>
                                                <input id="createTime" type="hidden" th:value="${#dates.format(sysGoods.getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}">
                                            </p>
                                        </li>
                                    </ul>
                                    <li class="list-group-item">
                                        <h2><b  class="font-bold">选择生产方式：</b></h2>
                                        <br>
                                        <div class="row">
                                            <div class="col-sm-4 text-center">
                                                <a id="pro1" href="javascript:void(0)" class="btn btn-primary btn-rounded btn-sm"><i class="fa fa-refresh"></i>&nbsp;生产</a>
                                                <h3><p class="text-primary">总量100，用时10s</p></h3>
                                            </div>
                                            <div class="col-sm-4 text-center">
                                                <a id="pro2" href="javascript:void(0)" class="btn btn-primary btn-rounded btn-sm"><i class="fa fa-refresh"></i>&nbsp;生产</a>
                                                <h3><p class="text-primary">总量250，用时20s</p></h3>

                                            </div>
                                            <div class="col-sm-4 text-center">
                                                <a id="pro3" href="javascript:void(0)" class="btn btn-primary btn-rounded btn-sm"><i class="fa fa-refresh"></i>&nbsp;生产</a>
                                                <h3><p class="text-primary">总量500，用时30s</p></h3>

                                            </div>
                                        </div>

                                    </li>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


    <th:block th:include="include :: footer" />
    <script>

        // let goodsId1 = $("#goodsId1").html();
        //
        // $("#goodsId").value(goodsId1);

        let goodsId = $("#goodsId").val();

        let i = 0;
        let time = 0;
        $("#pro1").click(function () {
            time = 10000;
            i = 1;
            TimeDown("show", time, i);
        });
        $("#pro2").click(function () {
            time = 20000;
            i = 2;
            TimeDown("show", time, i);
        });
        $("#pro3").click(function () {
            time = 30000;
            i = 3;
            TimeDown("show", time, i);
        });


        /*
         时间倒计时
         TimeDown.js
         */
        function TimeDown(id, value, i) {


            //倒计时的总秒数
            var totalSeconds = parseInt(value / 1000);

            //取模（余数）
            var modulo = totalSeconds % (60 * 60 * 24);
            //小时数
            var hours = Math.floor(modulo / (60 * 60));
            modulo = modulo % (60 * 60);
            //分钟
            var minutes = Math.floor(modulo / 60);
            //秒
            var seconds = modulo % 60;

            hours = hours.toString().length == 1 ? '0' + hours : hours;
            minutes = minutes.toString().length == 1 ? '0' + minutes : minutes;
            seconds = seconds.toString().length == 1 ? '0' + seconds : seconds;

            //输出到页面
            document.getElementById(id).innerHTML = hours + ":" + minutes + ":" + seconds;
            //延迟一秒执行自己
            if(hours == "00" && minutes == "00" && parseInt(seconds)-1<0){
                $.modal.confirm("生产完成", function() {
                    $.post("/system/good/pro",{"id":goodsId,"i":i}, function (){
                        $.modal.msgReload();
                    })
                });
            }else{
                setTimeout(function () {
                    TimeDown(id, value-1000, i);
                }, 1000)
            }

        }
    </script>
</body>
</html>